<!--
 * @Author: 田鑫
 * @Date: 2023-03-05 18:14:16
 * @LastEditors: 田鑫
 * @LastEditTime: 2023-03-05 19:17:52
 * @Description: 
-->
<script lang="ts" setup>
import type { RouteLocationNormalized } from 'vue-router';

const router = useRouter();
const route = useRoute();

const matched = computed(() => {
  if (route.matched.length === 1 && route.matched[0].path === '/') {
    return [];
  } else {
    return route.matched.reduce((t: RouteLocationNormalized[], o) => {
      const isExist = t.find((c) => c.name === o.name);
      return isExist ? t : [...t, router.resolve(o)];
    }, []);
  }
});
</script>

<template>
  <a-breadcrumb class="container-breadcrumb">
    <a-breadcrumb-item v-for="{ meta, name } in matched" :key="name">
      <router-link v-slot="{ href, navigate }" :to="{ name }" custom>
        <a-link v-if="meta.needNavigate" :href="href" @click="navigate">{{
          meta.locale ? meta.locale : '主页'
        }}</a-link>
        <a-link v-else disabled>{{ meta.locale ? meta.locale : '主页' }}</a-link>
      </router-link>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<style scoped lang="less">
.container-breadcrumb {
  margin: 16px 0;
  :deep(.arco-breadcrumb-item) {
    > a {
      color: rgb(var(--gray-6));
    }
    &:last-child {
      color: rgb(var(--gray-8));
    }
  }
}
</style>
